<template>
  <div class="all">
    <div class="title">
      <div>{{ title }}</div>
      <div>
        <el-button type="primary" icon="el-icon-back" @click="goBack">返回</el-button>
        <el-button v-if="roles.includes('ProjectPlan2Update')" type="danger" icon="el-icon-delete" @click="delBtn">删除</el-button>
        <el-button v-if="roles.includes('ProjectPlan2Delete')" type="primary" icon="el-icon-document-checked" @click="submitForm('form')">保存</el-button>
      </div>
    </div>
    <div class="detail-mid">
      <el-form ref="form" v-loading="loading" :model="data" :rules="rules" hide-required-aterisk="false" inline>
        <el-row>
          <el-col :span="4">
            <el-form-item label="编号：" prop="coding">
              <el-input v-model="data.coding" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="设备：" prop="equipment_id">
              <Selects v-model="data.equipment_id" action="equipmentList" :query="{ add_field: 'coding' }" :refresh="!editId" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="类别：">
              <el-input v-model="data.category" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="是否停机：" prop="halt">
              <SelfSelect v-model="data.halt" :show-list="halt" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="任务时长：" prop="task_long">
              <el-input v-model="data.task_long" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="期望工时(分钟)：">
              <el-input v-model="data.expect_man_minutes" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="执行时间：" prop="execute_time">
              <el-date-picker v-model="data.execute_time" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="周期：" prop="period">
              <el-input v-model="data.period" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="周期单位：" prop="period_unit">
              <SelfSelect v-model="data.period_unit" :show-list="planUnit" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="负责人：" prop="admin_id">
              <Selects v-model="data.admin_id" action="adminList" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="状态：" prop="status">
              <SelfSelect v-model="data.status" :show-list="switchOption2" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="专业：" prop="profession">
              <SelfSelect v-model="data.profession" :show-list="planSpecial" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="排序：" prop="sort">
              <el-input v-model="data.sort" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="detail-bottom">
      <el-tabs>
        <el-tab-pane v-if="editId" label="任务">
          <div class="detail-table">
            <el-table ref="multipleTable" tooltip-effect="dark" width="100%" :data="data.plan_task">
              <el-table-column prop="parts.name" label="部位" align="left" min-width="13%">
                <template slot-scope="scope">
                  <el-input v-show="scope.$index === taskIndex" v-model="editPart" clearable style="width: 80%" />
                  <p v-show="scope.$index !== taskIndex">{{ scope.row.part }}</p>
                </template>
              </el-table-column>
              <el-table-column prop="parts.name" label="项目内容" align="left" min-width="14%">
                <template slot-scope="scope">
                  <el-input v-show="scope.$index === taskIndex" v-model="editParam" clearable style="width: 80%" />
                  <p v-show="scope.$index !== taskIndex">{{ scope.row.param }}</p>
                </template>
              </el-table-column>
              <el-table-column prop="number" label="判定标准" align="left" min-width="15%">
                <template slot-scope="scope">
                  <el-input v-show="scope.$index === taskIndex" v-model="editParamDetail" clearable style="width: 80%" />
                  <p v-show="scope.$index !== taskIndex">{{ scope.row.param_detail }}</p>
                </template>
              </el-table-column>
              <el-table-column prop="number" label="测量单位" align="left" min-width="13%">
                <template slot-scope="scope">
                  <el-input v-show="scope.$index === taskIndex" v-model="editTaskUnit" clearable style="width: 80%" />
                  <p v-show="scope.$index !== taskIndex">{{ scope.row.task_unit }}</p>
                </template>
              </el-table-column>
              <el-table-column prop="number" label="上限值" align="left" min-width="12%">
                <template slot-scope="scope">
                  <el-input v-show="scope.$index === taskIndex" v-model="editMax" clearable style="width: 80%" />
                  <p v-show="scope.$index !== taskIndex">{{ scope.row.max }}</p>
                </template>
              </el-table-column>
              <el-table-column prop="number" label="下限值" align="left" min-width="14%">
                <template slot-scope="scope">
                  <el-input v-show="scope.$index === taskIndex" v-model="editMin" clearable style="width: 80%" />
                  <p v-show="scope.$index !== taskIndex">{{ scope.row.min }}</p>
                </template>
              </el-table-column>
              <el-table-column prop="number" label="方法" align="left" min-width="14%">
                <template slot-scope="scope">
                  <el-input v-show="scope.$index === taskIndex" v-model="editTask" clearable style="width: 80%" />
                  <p v-show="scope.$index !== taskIndex">{{ scope.row.task }}</p>
                </template>
              </el-table-column>
              <el-table-column prop="number" label="类型" align="left" min-width="14%">
                <template slot-scope="scope">
                  <SelfSelect v-show="scope.$index === taskIndex" v-model="editType" :show-list="projectType" />
                  <p v-show="scope.$index !== taskIndex">{{ scope.row.types }}</p>
                </template>
              </el-table-column>
              <el-table-column v-if="roles.includes('ProjectPlan1Update')" label="操作" align="left" min-width="8%">
                <template scope="scope">
                  <div v-if="data.status === 1">
                    <el-button v-if="scope.$index !== taskIndex" size="small" type="text" @click="taskEditTable(scope)">编辑</el-button>
                    <el-button v-else size="small" type="text" @click="taskSaveTable(scope)">保存</el-button>
                    <el-button v-if="scope.$index !== taskIndex" class="delBtn" type="text" size="small" @click="taskDel(scope.row.id)">删除</el-button>
                    <el-button v-else size="small" type="text" @click="cancelTable">取消</el-button>
                  </div>
                  <div v-else>
                    <span>-</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <el-form v-if="roles.includes('ProjectPlan1Update')" ref="taskFrom" :model="data" inline>
              <el-row style="margin-top: 20px" class="input clearables" :gutter="2">
                <el-col :span="3">
                  <el-form-item>
                    <el-input v-model="part" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item>
                    <el-input v-model="param" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item>
                    <el-input v-model="param_detail" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-form-item>
                    <el-input v-model="task_unit" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item>
                    <el-input-number v-model="max" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item>
                    <el-input-number v-model="min" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item>
                    <el-input v-model="task" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item>
                    <SelfSelect v-model="type" :show-list="projectType" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="1">
                  <el-button icon="el-icon-upload2" @click="taskSubmit" />
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="editId" label="执行人">
          <div class="detail-table">
            <el-table ref="multipleTable" tooltip-effect="dark" width="100%" :data="data.plan_member">
              <el-table-column prop="admin" label="员工" align="left" min-width="29%" />
              <el-table-column v-if="roles.includes('ProjectPlan2Update')" label="操作" min-width="71%" align="left">
                <template scope="{row}">
                  <el-button class="delBtn" type="text" @click="memberDel(row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-form v-if="roles.includes('ProjectPlan2Update')" ref="From" style="margin-top: 10px" :model="data" inline>
              <el-row>
                <el-col :span="7">
                  <el-form-item>
                    <Selects v-model="admin_id" action="adminList" />
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-button icon="el-icon-upload2" @click="memberSubmit(2)" />
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="描述">
          <el-row v-if="editId" :gutter="20" style="padding: 2px">
            <el-col :span="4">
              <div>
                <p>创建时间日期</p>
                <el-input v-model="data.create_time" clearable readonly />
              </div>
              <div>
                <p>创建人</p>
                <el-input v-model="data.create_admin" clearable readonly />
              </div>
              <div v-if="data.update_time">
                <p>最近更新</p>
                <el-input v-model="data.update_time" clearable readonly />
                <p>更新者</p>
                <el-input v-model="data.update_admin" clearable readonly />
              </div>
            </el-col>
            <el-col :span="16">
              <TinyMce v-model="data.content" />
            </el-col>
            <el-col class="upload" :span="4">
              <Adjunct :pk="editId" table="plan2" />
            </el-col>
          </el-row>
          <el-row v-if="!editId" :gutter="20" style="padding: 2px">
            <el-col :span="24">
              <TinyMce v-model="data.content" />
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import API from '@/api/project/plan'
import SelfSelect from '@/components/select-o'
import TinyMce from '@/components/Tinymce/index'
import Selects from '@/components/select-search'
import Adjunct from '@/components/Upload/adjunct'
import { category, halt, need, planSpecial, switchOption2, planUnit, lubType, isEngineer, projectType } from '@/utils/option'
import PARTS from '@/api/stock/parts'
import { mapGetters } from 'vuex'
export default {
  inject: ['goUrl', 'isEdit', 'add', 'update', 'reload'],
  components: {
    SelfSelect,
    TinyMce,
    Selects,
    Adjunct
  },
  data() {
    return {
      data: {
        sort: 100,
        status: 1,
        category: '自主维护',
        category_id: 2
      },
      editId: null,
      title: '',
      category,
      planUnit,
      planSpecial,
      switchOption2,
      lubType,
      halt,
      projectType,
      need,
      isEngineer,
      admin_id: null,
      type: null,
      task: null,
      engineer: null,
      cellIndex: null,
      taskIndex: null,
      parts_id: null,
      number: null,
      editNumber: null,
      editType: null,
      editTask: null,
      editPartsId: null,
      editTaskUnit: null,
      editParamDetail: null,
      editMin: null,
      editTaskId: null,
      editMax: null,
      editParam: null,
      editPart: null,
      canConfirm: false,
      part: null,
      param: null,
      param_detail: null,
      task_unit: null,
      max: null,
      min: null,
      spec: null,
      store: null,
      create_time: null,
      loading: true,
      rules: {
        coding: { required: true, message: '请输入编号', trigger: 'change' },
        equipment_id: { required: true, message: '请选择设备', trigger: 'change' },
        status: { required: true, message: '请选择状态', trigger: 'change' },
        sort: { required: true, message: '请输入排序', trigger: 'change' },
        category_id: { required: true, message: '请输入类别', trigger: 'change' },
        halt: { required: true, message: '请选择是否停机', trigger: 'change' },
        task_long: { required: true, message: '请输入任务时长', trigger: 'change' },
        execute_time: { required: true, message: '请选择执行时间', trigger: 'change' },
        period: { required: true, message: '请输入周期', trigger: 'change' },
        period_unit: { required: true, message: '请选择周期单位', trigger: 'change' },
        admin_id: { required: true, message: '请选择负责人', trigger: 'change' },
        monitor: { required: true, message: '请选择班长审核', trigger: 'change' },
        engineer: { required: true, message: '请选择工程师审核', trigger: 'change' },
        profession: { required: true, message: '请选择专业', trigger: 'change' }
      }
    }
  },
  created() {
    const edit = this.isEdit()
    if (edit) {
      this.title = '更新自主维护'
      this.editId = edit
      this.info()
    } else {
      this.loading = false
      this.title = '新增自主维护'
    }
  },
  computed: {
    ...mapGetters(['roles'])
  },
  methods: {
    goBack() {
      this.$router.push('/project/plan2')
    },
    info() {
      API.getOne(this.editId).then(res => {
        this.data = res.data
        this.data.category = '自主维护'
        this.data.category_id = 2
      }).finally(() => {
        this.data.plan_task.forEach(item => {
          if (item.min > item.max) {
            item.max = null
          }
        })
        this.loading = false
      })
    },
    delBtn() {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const id = this.editId
        API.delete(id).then(res => {
          if (res.data.error_code !== 1) {
            this.$message.error(res.data.message)
          } else {
            this.$message.success('删除成功')
            this.goBack()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    memberSubmit(engineer) {
      const memberData = {
        admin_id: this.admin_id,
        plan_id: this.editId,
        engineer: engineer
      }
      API.memberAppend(memberData).then(res => {
        if (res.data.error_code === 1) {
          this.$message.success('新增成功')
          this.admin_id = null
          this.info()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    partsSubmit() {
      const partsData = {
        parts_id: this.parts_id,
        plan_id: this.editId,
        number: this.number
      }
      API.partsAppend(partsData).then(res => {
        if (res.data.error_code === 1) {
          this.$message.success('新增成功')
          this.info()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    taskSubmit() {
      const partsData = {
        part: this.part,
        plan_id: this.editId,
        param: this.param,
        task_unit: this.task_unit,
        param_detail: this.param_detail,
        task: this.task,
        type: this.type,
        max: this.max,
        min: this.min
      }
      API.taskAppend(partsData).then(res => {
        if (res.data.error_code === 1) {
          this.$message.success('新增成功')
          this.info()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    memberDel(id) {
      API.memberRemove(id).then(res => {
        if (res.data.error_code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success('删除成功')
        }
      }).finally(() => {
        this.info()
      })
    },
    submitForm() {
      if (this.editId) {
        this.update(API, this.data, this.$refs['form'], '/project/plan2')
      } else {
        this.add(API, this.data, this.$refs['form'])
      }
    },
    partsEditTable({ $index, row }) {
      // 获取当前点击行下标
      console.log(row)
      this.cellIndex = $index
      this.editNumber = row.number
      this.editPartsId = row.id
    },
    partsSaveTable({ row }) {
      this.cellIndex = null
      const toolData = {
        plan_id: this.editId,
        id: row.id,
        parts_id: this.editPartsId,
        number: this.editNumber
      }
      API.partsEdit(toolData).then(res => {
        if (res.data.error_code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success('更新成功')
        }
      }).finally(() => {
        this.info()
      })
    },
    taskEditTable({ $index, row }) {
      // 获取当前点击行下标
      this.taskIndex = $index
      this.editPart = row.part
      this.editParam = row.param
      this.editParamDetail = row.param_detail
      this.editTask = row.task
      this.editType = row.type
      this.editTaskUnit = row.task_unit
      this.editMax = row.max
      this.editMin = row.min
    },
    taskSaveTable({ row }) {
      this.taskIndex = null
      const toolData = {
        plan_id: this.editId,
        id: row.id,
        task: this.editTask,
        type: this.editType,
        number: this.editNumber,
        part: this.editPart,
        param: this.editParam,
        param_detail: this.editParamDetail,
        task_unit: this.editTaskUnit,
        max: this.editMax,
        min: this.editMin
      }
      API.taskEdit(toolData).then(res => {
        if (res.data.error_code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success('更新成功')
        }
      }).finally(() => {
        this.info()
      })
    },
    cancelTable(v) {
      this.taskIndex = null
      this.info()
    },
    partsDel(id) {
      API.partsRemove(id).then(res => {
        if (res.data.error_code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success('删除成功')
        }
      }).finally(() => {
        this.info()
      })
    },
    taskDel(id) {
      API.taskRemove(id).then(res => {
        if (res.data.error_code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success('删除成功')
        }
      }).finally(() => {
        this.info()
      })
    },
    grant() {
      if ([1].includes(this.data.status)) {
        this.canConfirm = true
      }
    }
  },
  watch: {
    parts_id(oldValue) {
      PARTS.partsList({ id: oldValue }).then(res => {
        console.log(res.data.data)
        this.spec = res.data.data[0].spec
        this.store = res.data.data[0].store
      })
      API.getOne({})
    }
  }
}
</script>

